<script setup lang="tsx">
import { Close, FullScreen } from '@element-plus/icons-vue'
import { ElDialog, ElIcon, ElScrollbar } from 'element-plus'
import { useDesign } from 'fetm-hooks'
import { IsUtils } from 'fetm-utils'
import { computed, nextTick, ref, unref, useAttrs, useSlots, watch } from 'vue'
import { propTypes } from '../../../helpers/propTypes'

defineOptions({
  // eslint-disable-next-line vue/no-reserved-component-names
  name: 'Dialog',
})

const props = defineProps({
  modelValue: propTypes.bool.def(false),
  title: propTypes.string.def('Dialog'),
  fullscreen: propTypes.bool.def(false),
  isShowFullscreen: propTypes.bool.def(true),
  maxHeight: propTypes.oneOfType([String, Number]).def('50vh'),
  useScrollbar: propTypes.bool.def(true),
})
const slots = useSlots()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('dialog')

const attrs = useAttrs()

const isFullscreen = ref(props.fullscreen)

watch(
  () => props.fullscreen,
  (val) => {
    isFullscreen.value = val
  },
  {
    immediate: true,
  },
)

function toggleFull() {
  isFullscreen.value = !unref(isFullscreen)
}

const dialogHeight = ref(
  IsUtils.isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight,
)

watch(
  () => isFullscreen.value,
  async (val: boolean) => {
    await nextTick()
    if (val) {
      const windowHeight = document.documentElement.offsetHeight
      dialogHeight.value = `${
        windowHeight - 60 - 30 - (slots.footer ? 60 : 0)
      }px`
    }
    else {
      dialogHeight.value = IsUtils.isNumber(props.maxHeight)
        ? `${props.maxHeight}px`
        : props.maxHeight
    }
  },
  {
    immediate: true,
  },
)

const dialogStyle = computed(() => {
  return {
    height: unref(dialogHeight),
  }
})
</script>

<template>
  <ElDialog
    :model-value="modelValue"
    :fullscreen="isFullscreen"
    class="px-16px !py-0 <md:!w-90%"
    :class="[prefixCls]"
    top="0"
    append-to-body
    destroy-on-close
    lock-scroll
    draggable
    :close-on-click-modal="false"
    :show-close="false"
    v-bind="attrs"
  >
    <template #header="{ close }">
      <div
        class="relative h-60px flex items-center justify-between pl-15px pr-15px text-16px"
      >
        <slot name="title">
          {{ title }}
        </slot>
        <div
          class="absolute right-15px top-[50%] h-60px flex translate-y-[-50%] items-center justify-between"
        >
          <ElIcon
            v-if="isShowFullscreen"
            :title="isFullscreen ? '退出全屏' : '全屏'"
            class="is-hover mr-10px cursor-pointer color-[var(--el-color-info,#909399)] hover:color-[var(--el-color-primary,#409eff)]"
            @click="toggleFull"
          >
            <FullScreen />
          </ElIcon>
          <ElIcon
            title="关闭"
            class="is-hover cursor-pointer color-[var(--el-color-info,#909399)] hover:color-[var(--el-color-primary,#409eff)]"
            @click="close"
          >
            <Close />
          </ElIcon>
        </div>
      </div>
    </template>

    <ElScrollbar v-if="useScrollbar" :style="dialogStyle">
      <slot />
    </ElScrollbar>
    <div v-else :style="dialogStyle">
      <slot />
    </div>

    <template v-if="slots.footer" #footer>
      <slot name="footer" />
    </template>
  </ElDialog>
</template>

<style lang="less">
.el-overlay-dialog {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.el-dialog {
  margin: 0 !important;
  &__header {
    margin-right: 0 !important;
    border-bottom: 1px solid #dcdfe6 !important;
    padding: 0 !important;
    height: 60px !important;
  }
  &__body {
    padding: 15px !important;
  }
  &__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 60px !important;
    padding: 10px 15px !important;
    border-top: 1px solid #dcdfe6 !important;
  }
  &__headerbtn {
    top: 0 !important;
  }
}
</style>
